import React, { useEffect, useRef, useState } from 'react'
import { Button, Cascader, Col, Form, Input, message, Row, Steps, Typography } from 'antd';
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
import { advicecatetory, toast } from '../../utils/commom';
import { ajax } from '../../api';
import myinfo from '../../mobx/info';
// import RichEditor from './richEditor';
const {Title}  = Typography;
const { Step } = Steps;
export default function Addstudent({history}:any) {
    const [current, setcurrent] = useState<number>(0)
    const [toggle, settoggle] = useState<any>(false)
    const form:any = useRef()
    const context:any = useRef()
    const [obj, setobj] = useState<any>({})
    const steps = [
        {title:'基本信息',desc:'请认真填写好意见标题和分类',icon:<UserOutlined />},
        {title:"意见内容",desc:"请本着良心认真写好意见",status:"wait",icon:<SolutionOutlined />},
        {title:"请等待",desc:"",status:"wait",icon:current==2? <LoadingOutlined /> :''},
        {title:"提交意见",desc:"谢谢你的建议.",status:"wait",icon:<SmileOutlined  />}
    ]
    // const onFinish = ()=>{
    //      console.log(form.current);
    //   let res = form.current.validateFields(['title','category'])
    //   .then((res1: any)=>{
    //      settoggle(false)
    //   })
    //   console.log(res);
    // }
     const {userInfo} = myinfo
     
   
    const next = ()=>{
       if(current==0){
        form.current.validateFields()
        .then((v: any)=>{
            console.log(v);
            
          setcurrent(current+1)  
          setobj(v)
          console.log(obj);
          
        })
        .catch((err: any)=>{
            toast.error('请先完善信息')
        })
       }else if(current==1 ){
           const value = context.current.getFieldsValue().content
           if(value && (value!='')){
            console.log(context.current.getFieldsValue().content)
            setcurrent(current+1)  
            console.log(current)
            settoggle(true)

            setTimeout(()=>{
                toast.success('已完成点击下一步')
                settoggle(false)
            },2000)

           }else{
               toast.error('请输入意见内容')
               console.log(context.current.getFieldsValue().content)
           }
           
            
        }else if(current==2 ){
            console.log('1qqqq')
              setcurrent(current+1)   
        }
        
       
    }
    const prev = ()=>{
        setcurrent(current-1)
    }
    const createAdvise =async ()=>{
        //ajax
      let {code,result} =await ajax.addadvise({
          ...obj,
          content: context.current.getFieldsValue().content,
          userInfo:userInfo
      })
      if(code==200){
          console.log(result)
          history.push('/main/advise/list')
      }
    }
    
    return (
        <div>
               <Title level={2}>添加意见</Title>
           <Steps current={current}>
           {
               steps.map((l,i)=>(
                <Step key={i} title={l.title} description={l.desc} icon={l.icon}/>
               ))
           }
            </Steps>

        <Row style={{marginTop:15}}>
            <Col span={24}>
            <div className="step1" key={1} style={{width:'30%',minHeight:300,display:current==0?'block':'none'}}>
            <p>添加基本信息-{current}</p>
            <Form
             name="changeform"
             className="change-form"
             initialValues = {{
             }}
             ref={form}
             layout="vertical"
           
            >
            <Form.Item
             label="意见标题"
             name="title"
             rules={[
                 { required: true, message: '请输入' }
             ]}
            >
             <Input placeholder="请输入意见标题"/>
            </Form.Item>

            <Form.Item
             label="意见分类"
             name="category"
             rules={[
                 { required: true, message: '请选择' }
             ]}
            >
             <Cascader options={advicecatetory} placeholder="请选择"/>
            </Form.Item>

            </Form>
            </div>
            </Col>
        </Row>
             <div style={{display:current==1?'block':'none',minHeight:320}}>
             <p>添加意见-{current}</p>
             <Form
              name="changeform"
              className="change-form"
              initialValues = {{
              }}
              ref={context}
              layout="vertical"
             >
                 <Form.Item
                  label="意见内容"
                  name="content"
                  rules={[
                      { required: true, message: '请输入' }
                  ]}
                 >
                    <Input.TextArea
                    maxLength={150} 
                    showCount={true}
                    />
                 </Form.Item>
             </Form>
             </div>

           <div></div>



            <Row>
                <Col>
                {current < steps.length - 1  && (
                <Button type="primary" disabled={toggle}  onClick={() => next()}>
                  下一步
                </Button>
              )}
               {current === steps.length - 1 && (
          <Button type="primary" onClick={createAdvise}>
            提交意见
          </Button>
        )}
        {current > 0  && current!=(steps.length - 1) &&  (
          <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
            上一步
          </Button>
        )}

      
              
                </Col>
            </Row>
        </div>
    )
}
